<template>
	<div class="my-service  bg-white ">
		<div
			class="title px-[30rpx] py-[20rpx] font-medium text-xl border-light border-solid border-0 border-b">
			<div>{{t('robot.myOrder')}}</div>
		</div>
		<div class="flex flex-wrap pt-[40rpx] pb-[20rpx] px-[24rpx] ">
			<div v-for="(item, index) in data.menus1" :key="index" class="flex flex-col  items-center w-1/3 mb-[15px] text-center"
				@click="handleClick(item.link)">
				<u-image width="64" height="64" :src="item.image" alt="" />
				<div class="mt-[7px]">{{ item.name }}</div>
			</div>
		</div>
	</div>
</template>
<script lang="ts" setup>
	import { navigateTo } from '@/utils/util'
	import { reactive } from 'vue'
	import { t } from '@/utils/util'
	
	const data = reactive({
		menus1: [
			{
				"image": "/static/images/robot/pending.png",
				"name": t('robot.orderStatus5'),
				"link": {
					"path": "/pages/robot/record?status=5",
					"type": "shop"
				}
			},
			{
				"image": "/static/images/robot/paying.png",
				"name": t('robot.orderStatus4'),
				"link": {
					"path": "/pages/robot/record?status=4",
					"type": "shop"
				}
			},
			{
				"image": "/static/images/robot/finish.png",
				"name": t('robot.orderStatus1'),
				"link": {
					"path": "/pages/robot/record?status=1",
					"type": "shop"
				}
			}
		]
	})
	const handleClick = (link : any) => {
		navigateTo(link)
	}
</script>

<style lang="scss"></style>